---
import ShowcaseEntry from '$components/Sections/ShowcaseEntry.astro'
import Tip from '$components/Tip/Tip.astro'
import MainLayout from '$layouts/MainLayout.astro'
import { getCollection, type CollectionEntry } from 'astro:content'

const showcaseCollection = await getCollection('showcase')

const regular = showcaseCollection.filter((e) => {
  return e.data.size == 'regular'
})
const large = showcaseCollection.filter((e) => {
  return e.data.size == 'large'
})

const filteredCollection: CollectionEntry<'showcase'>[] = []

for (const l of large) {
  if (regular.length >= 3) {
    const s1 = regular.shift()
    const s2 = regular.shift()
    const s3 = regular.shift()
    //@ts-ignore
    filteredCollection.push(s1, s2, s3)
  }
  filteredCollection.push(l)
}
filteredCollection.push(...regular)
---

<MainLayout title="Threlte Showcase">
  <div class="flex flex-col gap-10 py-24">
    <div class="flex flex-col items-center gap-6">
      <h1 class="text-glow-white text-center text-6xl font-bold">
        Showcase<br />
      </h1>
      <h2 class="text-faded">
        Projects made with Threlte. See what's possible and find inspiration.
      </h2>
    </div>

    <Tip
      type="info"
      glow
    >
      Submit your site. Questions about building your own app? Join our community on Discord!
    </Tip>

    <div class="flex grid-cols-3 flex-col gap-6 md:grid">
      {
        filteredCollection.map((entry) => {
          return <ShowcaseEntry entry={entry} />
        })
      }
    </div>
  </div>
</MainLayout>
